<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% load staticfiles %}
    <meta name="apple-mobile-web-app-title" content="HttpRunnerManager"/>
    <title>自动化测试报告</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/chosen/1.8.2/chosen.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static "assets/css/template.css" %}"/>
    <base target="_blank">
</head>
<body class="gray-bg" onload="makeReport({{ resultData }})">
<div class="row  border-bottom white-bg dashboard-header">
    <div class="col-sm-12 text-center">
        <span style="color: #1ab394; font-size: 20px; font-weight: 700">接口自动化测试报告</span>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>报告汇总</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-6 b-r" style="height:320px">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label text-navy">套件名称:</label>
                                    <div class="col-sm-5">
                                        <span class="form-control" id="testName"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label text-navy">用例总数:</label>
                                    <div class="col-sm-5">
                                        <span class="form-control" id="testAll"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label text-navy">用例通过:</label>
                                    <div class="col-sm-5">
                                        <span class="form-control" id="testPass"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label text-danger">用例失败:</label>
                                    <div class="col-sm-5">
                                        <span class="form-control text-danger" id="testFail"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label text-warning">用例跳过:</label>
                                    <div class="col-sm-5">
                                        <span class="form-control text-warning" id="testSkip"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label text-navy">开始时间:</label>
                                    <div class="col-sm-5">
                                        <span class="form-control" id="beginTime"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label text-navy">运行时间:</label>
                                    <div class="col-sm-5">
                                        <span class="form-control" id="totalTime"></span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-sm-6">
                            <div style="height:250px" id="echarts-map-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>详细数据</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="input-group panel-heading"
                         style="width: 100%; background-color: #1ab394; margin-bottom: 10px; text-align: left; font-family: Consolas;">
                        <label style="color: snow">所属项目:</label>
                        <select class="chosen-select form-control" data-placeholder="----------" style="width: 250px;"
                                name="filterClass" id="filterClass">
                            <option value="">----------</option>
                        </select>

                        <label style="color: snow">所属模块:</label>
                        <select class="chosen-select form-control" data-placeholder="----------" style="width: 250px;"
                                name="filterMethod" id="filterMethod">
                            <option value="">----------</option>
                        </select>

                        <label style="color: snow">结果:</label>
                        <select class="chosen-select form-control" data-placeholder="-----" style="width: 100px;"
                                name="filterResult" id="filterResult">
                            <option value="">-----</option>
                        </select>
                        <div style="float: right">
                            <label class="form-control">
                                <span class="text-navy">用例数: </span><span class="text-navy b-r"
                                                                          id="filterAll">3</span><span> | </span>
                                <span style="color: green">成功: </span><span style="color: green"
                                                                            id="filterOk">3</span><span> | </span>
                                <span class="text-danger">失败: </span><span class="text-danger"
                                                                           id="filterFail">3</span><span> | </span>
                                <span class="text-warning">跳过: </span><span class="text-warning"
                                                                            id="filterSkip">3</span>
                            </label>
                        </div>
                    </div>
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>所属项目</th>
                            <th>所属模块</th>
                            <th>用例名称</th>
                            <th>运行时长</th>
                            <th>结果</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="detailBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/chosen/1.8.2/chosen.jquery.js"></script>
<script type="text/javascript">

    function details(obj) {
        if ($(obj).text() == '展开') {
            var len = $(obj).parent().parent().children().length;
            var detailLog = "";
            var logs = resultData["testResult"][parseInt($(obj).attr("buttonIndex"))]["log"];
            $(obj).text("收缩");
            $(obj).removeClass("btn-primary");
            $(obj).addClass("btn-danger");
            $.each(logs, function (i, n) {
                detailLog = detailLog + "<p>" + n + "</p>";
            });
            $(obj).parent().parent().after("<tr><td colspan='" + len + "'><div style='font-family: Consolas;font-size:12px'>" + detailLog + "</div></td></tr>");
        } else if ($(obj).text() == '收缩') {
            $(obj).parent().parent().next().remove();
            $(obj).text("展开");
            $(obj).removeClass("btn-danger");
            $(obj).addClass("btn-primary");
        }

    }

    function makeReport(resultData) {
        window.resultData = resultData;
        $(function () {
            $("#testName").text(resultData["testName"]);
            $("#testPass").text(resultData["testPass"]);
            $("#testFail").text(resultData["testFail"]);
            $("#testSkip").text(resultData["testSkip"]);
            $("#testAll").text(resultData["testAll"]);
            $("#beginTime").text(resultData["beginTime"]);
            $("#totalTime").text(resultData["totalTime"]);
            var classNames = [];
            var methodNames = [];
            var results = [];
            $.each(resultData["testResult"], function (i, n) {
                if (classNames.indexOf(n["className"]) == -1) {
                    classNames.push(n["className"]);
                }
                if (methodNames.indexOf(n["methodName"]) == -1) {
                    methodNames.push(n["methodName"]);
                }
                if (results.indexOf(n["status"]) == -1) {
                    results.push(n["status"]);
                }
            });

            $.each(classNames, function (i, n) {
                $("#filterClass").append("<option value='" + n + "' hassubinfo='true'>" + n + "</option>");
            });
            $.each(methodNames, function (i, n) {
                $("#filterMethod").append("<option value='" + n + "' hassubinfo='true'>" + n + "</option>");
            });
            $.each(results, function (i, n) {
                $("#filterResult").append("<option value='" + n + "' hassubinfo='true'>" + n + "</option>");
            });

            $("#filterClass").chosen({search_contains: true});
            $("#filterMethod").chosen({search_contains: true});
            $("#filterResult").chosen({search_contains: true});

            function generateResult(className, methodName, caseResult) {
                $("#detailBody").children().remove();
                var filterAll = 0;
                var filterOk = 0;
                var filterFail = 0;
                var filterSkip = 0;
                $.each(resultData["testResult"], function (i, n) {
                    if ((className == "" || n["className"] == className) && (methodName == "" || n["methodName"] == methodName) && (caseResult == "" || n["status"] == caseResult)) {
                        filterAll += 1;
                        var status = "";
                        var classColor = null
                        if (n["status"] == '成功') {
                            classColor = "success";
                            filterOk += 1;
                            status = "<td><span class='text-navy'>成功</span></td>";
                        } else if (n["status"] == '失败') {
                            classColor = "danger";
                            filterFail += 1;
                            status = "<td><span class='text-danger'>失败</span></td>";
                        } else if (n["status"] == '跳过') {
                            classColor = "warning";
                            filterSkip += 1;
                            status = "<td><span class='text-warning'>跳过</span></td>";
                        } else {
                            classColor = "info";
                            status = "<td><span>" + n["status"] + "</span></td>";
                        }
                        var tr = "<tr style='font-family: Consolas' class='" + classColor + "'>" +
                            "<td>" + (i + 1) + "</td>" +
                            "<td>" + n["className"] + "</td>" +
                            "<td>" + n["methodName"] + "</td>" +
                            "<td>" + n["description"] + "</td>" +
                            "<td>" + n["spendTime"] + "</td>" +
                            status + "<td><button type='button' onclick='details(this)' buttonIndex='" + i + "' class='btn btn-primary btn-xs' style='margin-bottom: 0px'>展开</button></td></tr>"
                        $("#detailBody").append(tr);
                    }
                });
                $("#filterAll").text(filterAll);
                $("#filterOk").text(filterOk);
                $("#filterFail").text(filterFail);
                $("#filterSkip").text(filterSkip);
            }

            generateResult("", "", "");

            $("#filterClass").on('change', function () {
                var className = $("#filterClass").val();
                var methodName = $("#filterMethod").val();
                var caseResult = $("#filterResult").val();
                generateResult(className, methodName, caseResult);
            });

            $("#filterResult").on('change', function () {
                var className = $("#filterClass").val();
                var methodName = $("#filterMethod").val();
                var caseResult = $("#filterResult").val();
                generateResult(className, methodName, caseResult);
            });

            $("#filterMethod").on('change', function () {
                var className = $("#filterClass").val();
                var methodName = $("#filterMethod").val();
                var caseResult = $("#filterResult").val();
                generateResult(className, methodName, caseResult);
            });

            function pie() {
                var option = {
                    title: {
                        text: '测试用例运行结果',
                        subtext: '',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['失败', '跳过', '成功']
                    },
                    series: [
                        {
                            name: '运行结果',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: resultData["testFail"], name: '失败'},
                                {value: resultData["testSkip"], name: '跳过'},
                                {value: resultData["testPass"], name: '成功'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                var chart = echarts.init(document.getElementById("echarts-map-chart"));
                chart.setOption(option);
            }

            pie();
        });
    }


</script>
</body>
</html>